define('admin/js/mod/user/List', [
    'utils/fetchEnhancer',
    'utils/Time',
    'utils/helpers'], (fetch, Time, helpers) => {

Vue.prototype.Time = Time;

const UserList = {
    data: function() {
        return {
            editDialogVisible: false,
            formData: {},

            roles: null,
            list: null,
            total: 0,
            pageSize: 10,
            current: 1
        }
    },
    methods: {
        fetchRoles: function() {
            let _self = this;
            fetch('/adminapi/listrole').then(function(json){
                if(0 === json.status) {
                    _self.roles = json.data.data;
                }
            });
        },
        fetchList: function(page) {
            let _self = this;

            fetch('/adminapi/listuser?page=' + page).then(function(json){
                if(0 === json.status) {
                    _self.total = parseInt(json.data.total, 10);
                    _self.pageSize = parseInt(json.data.page_size, 10);
                    _self.current = parseInt(json.data.current, 10);
                    _self.list = json.data.data;
                }
            });
        },
        pageChange: function(p) {
            this.fetchList(p);
        },
        handleTableClick: function(e) {
            let _self = this;
            let t = e.target;
            let role = t.getAttribute('data-role');
            let id = t.getAttribute('data-id');

            if('edit' === role) {
                fetch('/adminapi/getuserbasic?id=' + id).then(function(json){
                    if(0 === json.status) {
                        _self.formData = json.data.data,
                        _self.editDialogVisible = true;
                    }
                });
                return;
            }

            if('forbid' === role) {
                this.$confirm('确实要封禁吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    fetch('/adminapi/forbiduser', {
                        method: 'POST',
                        body: 'id=' + id
                    }).then((json) => {
                        if(0 === json.status) {
                            _self.fetchList(_self.current);
                        }
                    });

                }).catch(() => {});
            }
        },
        doEdit: function() {
            let _self = this;
            let ret = helpers.json2Query(this.formData);
            let url = '/adminapi/edituserrole';

            fetch(url, {
                method: 'POST',
                body: ret
            }).then(function(json){
                if(0 === json.status) {
                    _self.formData = {},
                    _self.editDialogVisible = false;
                    _self.fetchList(_self.current);

                    _self.$message.success('操作成功');
                } else {
                    _self.$message.error('操作失败');
                }
            });
        },
        translateRole: function(role) {
            let list = this.roles;
            if(!list) {
                return '';
            }

            for(let i=0; i<list.length; i++) {
                if(role === list[i].id) {
                    return list[i].role_name;
                }
            }

            return '';
        }
    },
    mounted: function() {
        this.fetchList(1);
        this.fetchRoles();
    },
    template:
`<div>
    <table class="x-table" @click="handleTableClick">
        <tr>
            <th>uid</th>
            <th>性别</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>头像</th>
            <th>角色</th>
            <th>生日</th>
            <th>注册时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <template v-if="list && list.length">
            <tr v-for="item in list">
                <td>{{ item.id }}</td>
                <td>{{ item.gender === '1' ? '男' : '女' }}</td>
                <td>{{ item.user_name }}</td>
                <td>{{ item.email }}</td>
                <td><img :src="item.avatar" width="60" height="60"/></td>
                <td>{{ translateRole(item.role) }}</td>
                <td>{{ Time.format('y-m-d h:i', item.birthday * 1000) }}</td>
                <td>{{ Time.format('y-m-d h:i', item.reg_time * 1000) }}</td>
                <td><span :style="item.status==='1'?'color:green':'color:red'">{{ '1' === item.status ? '正常' : '已封禁' }}</span></td>
                <td>
                    <span class="x-table-cursor-text" data-role="edit" :data-id="item.id">编辑基本信息</span>
                    <span class="x-table-cursor-text" data-role="forbid" :data-id="item.id">{{ item.status === '1' ? '封禁' : '解封' }}</span>
                </td>
            </tr>
        </template>
    </table>

    <div style="margin-top: 10px; text-align: right">
        <el-pagination
            background
            layout="prev, pager, next"
            @current-change="pageChange"
            :current-page="current"
            :page-size="pageSize"
            :total="total">
        </el-pagination>
    </div>

    <el-dialog title="修改" :visible.sync="editDialogVisible">
        <el-form :model="formData">
            <el-form-item v-if="formData.id" label="id" label-width="100px">
                <el-input :disabled="true" v-model="formData.id"></el-input>
            </el-form-item>
            <el-form-item label="Email" label-width="100px">
                <el-input v-model="formData.email"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" label-width="100px">
                <el-input v-model="formData.true_name"></el-input>
            </el-form-item>
            <el-form-item label="电话" label-width="100px">
                <el-input v-model="formData.phone" maxlength="15"></el-input>
            </el-form-item>
            <el-form-item label="角色" label-width="100px">
                <el-select v-model="formData.role" placeholder="请选择">
                    <el-option
                      v-for="item in roles"
                      :key="item.id"
                      :label="item.role_name"
                      :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="editDialogVisible=false">取消</el-button>
            <el-button type="primary" @click="doEdit">确定</el-button>
        </div>
    </el-dialog>
</div>`
};

return UserList;

});
